<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#box {
			background-color: #aaa;
			border: 2px solid #000;
			width: 200px;
			height: 200px;
			margin: 150px auto;

		}
	</style>
</head>
<body>
	<div id="box"></div>

	<script>
		let box = document.querySelector('#box');
		let ang1, ang2, ang = 0, oldAng = 0;

		function fnTan(touch1, touch2) {
			// 相当于算出三角形的对边和临边
			let x = touch1.clientX - touch2.clientX;
			let y = touch1.clientY - touch2.clientY;
			// 弧度转为角度，应该是x/y，但是atan2就是要反着写
			return Math.atan2(y, x) * 180 / Math.PI;
		}

		document.addEventListener('touchstart', function(ev) {
			// 旋转嘛，当然要两根手指喽
			if (ev.targetTouches.length >= 2) {
				// touch0是第一根手指，touch1是第二根手指
				ang1 = fnTan(ev.targetTouches[0], ev.targetTouches[1]);
				// oldAng是保存上一次旋转的度数。不能放在move中，否则，你懂得...
				oldAng = ang;
			}
		}, false)

		document.addEventListener('touchmove', function(ev) {
			// 移动的时候也要两根手指才行
			if (ev.targetTouches.length >= 2) {
				ang2 = fnTan(ev.targetTouches[0], ev.targetTouches[1]);
				// 算出旋转了多少度，
				ang = oldAng + ang2 - ang1;
				
				box.style.transform = `rotate(${ang}deg)`;
			}
		}, false)
		// 哦，对了，像这个例子就可以使用ev.touches
	
	</script>
</body>
</html>